<template>
  <div class="home page-component">
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in 2" :key="item">
        <img src="~assets/images/banner1.jpg" alt="" />
      </el-carousel-item>
    </el-carousel>
    <!-- 搜索 -->
    <div class="search-container">
      <div class="search-wrapper">
        <div class="hospital-search">
          <el-autocomplete
            class="search-input"
            prefix-icon="el-icon-search"
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="点击输入医院名称"
            @select="handleSelect"
          >
            <span
              slot="suffix"
              class="search-btn v-link highlight clickable selected"
              >搜索
            </span>
          </el-autocomplete>
        </div>
      </div>
    </div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left">
        <div class="home-filter-wrapper">
          <div class="title">井陉县医院</div>
          <div></div>
        </div>
        <div class="v-scroll-list hospital-list">
          <el-row :gutter="10">
            <el-col
              :xs="20"
              :sm="12"
              :md="8"
              :lg="8"
              :xl="6"
              v-for="(item, index) in departmentVoList"
              :key="item.id"
              :class="index == 0 ? 'selected' : ''"
              :id="item.depcode"
              ><el-card class="box-card">
                <template #header>
                  <span><img src="~assets/images/departmentIcon.png" alt=""> </span>
                  <div class="card-header">
                    <span class="depheader"> {{ item.depname }} </span>
                    <!-- <el-button class="button" type="text">Operation button</el-button>-->
                  </div>
                </template>
                <div
                  v-for="it in item.children"
                  :key="it.id"
                  @click="schedule(it.depcode)"
                  class="deptext item"
                >
                  <span class="v-link clickable">{{ it.depname }} </span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>


    </div>

    <div class="bigTitle">
			<span class="jiazai"  v-if="isshowloading">
			  <img src="/doctor_appointment/static/images/yygh/jiazai.gif" alt="" />
			正在加载所有科室信息，请稍后。。。。
			
			</span>

			<ul class="departmentList"  >

				<li v-for="(item, index) in departmentVoList"
              :key="item.id"
              :class="index == 0 ? 'selected' : ''"
              :id="item.depcode"
              >
					<div class="bigTitle"><span><img src="~assets/images/departmentIcon.png" alt=""> </span> {{ item.depname }} </div>
					<ul class="littleDepartment">
						<li v-for="it in item.children"
                  :key="it.id"
                  @click="schedule(it.depcode)"
                  class="v-link clickable" > {{ it.depname }} </li>
					</ul>
				</li>
			</ul>
		</div>

  </div>
</template>

<script>
import hospApi from "@/api/hosp/hospital";
import dictApi from "@/api/cmn/dict";
import cookie from 'js-cookie';
import userInfoApi from '@/api/user/userInfo'

export default {
  //服务端渲染异步，显示科室列表
  asyncData ({ params, error }) {
    //调用
    return hospApi.findDepartment("130121_0")
      .then(response => {
        return {
          departmentVoList: response.data
        }

      })
  },
  data () {
    return {
      searchObj: {},
      page: 1,
      limit: 10,

      state: "",
      hoscode: "130121_0", //医院编号
      hosname: "", //医院名称
      hostypeList: [], //医院等级集合
      districtList: [], //地区集合

      hostypeActiveIndex: 0,
      provinceActiveIndex: 0,
      activeIndex: 0,

      hospital: {
        param: {},
      },
      bookingRule: {},
      departmentVoList: [],
    };

  },
  created () {
    this.hoscode = "130121_0";
    this.init();
  },
  methods: {
    init () {
      //根据医院编号查询医院详情
      hospApi.show(this.hoscode).then((response) => {
        this.hospital = response.data.hospital;
        this.bookingRule = response.data.bookingRule;
      });
    },
    move (index, depcode) {
      this.activeIndex = index;
      document.getElementById(depcode).scrollIntoView();
    },
    //
    schedule (depcode) {
      // 登录判断
      let token = cookie.get('token')
      if (!token) {
        loginEvent.$emit('loginDialogEvent')
        return
      }
      //判断用户是否完成认证
      userInfoApi.getUserInfo().then(response => {
        let authStatus = response.data.authStatus
        //authStatus不等于2,没有认证成功
        if (!authStatus || authStatus != 2) {
          window.location.href = "/user"
          return
        }
      })
      window.location.href = '/hospital/schedule?hoscode=' + this.hoscode + "&depcode=" + depcode
    },
  },

}


</script>

<style>
.depheader {
  font-size: 16px;
  font-weight: bold;
}
.deptext {
  font-size: 16px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}

.el-col {
  border-radius: 4px;
  margin-bottom: 20px;
  gutter: 20px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}


	.departmentList{display: block !important;}
	.departmentList .bigTitle{font-size: 1.2em;font-weight: bold;margin-bottom:15px !important;}
	.departmentList .littleDepartment{display: flex;}
	.departmentList .bigTitle span{display:inline-block;width: 1.3em;height:1.3em;margin-right: 0.3em;position: relative;top: -1px;}
	.departmentList .bigTitle span img{width:100%;}
	.departmentList .littleDepartment li{margin: 0px 10px 15px 10px;color:#0b68a1;   font-size: 16px;}
	.departmentList .littleDepartment li:hover{cursor: pointer;}

</style>